.page {
    height: 100vh;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(to bottom, #4F2133, #3E3E3E)
}

.Big-img {
    width: 100%;
    height: 45%;
    padding: 50rpx 100rpx;


    image {
        border-radius: 30rpx;
        width: 550rpx;
        height: 550rpx;
    }
}

.tittle {
    width: 100%;
    text-align: center;
    font-size: 40rpx;
}

.auth {
    width: 100%;
    text-align: center;
    font-weight: 250;
    color: #ddd;
}

.controller {
    margin-top: 50rpx;
    margin-left: 5%;
    width: 90%;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    color: #ddd;

    progress {
        width: 70%;
    }
}

.action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 50rpx;

    .share,
    .favo,
    .pause,
    .next,
    .change {
        width: 100rpx;
        margin: 0 15rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 80rpx;
            height: 80rpx;
        }
    }

    .favo {
        image {
            width: 80rpx;
            height: 70rpx;
        }
    }

    .pause {
        border: solid 1px #ffffff;
        border-radius: 50%;
        padding: 10rpx;

        .zt {
            translate: 10rpx;
        }
    }

    .next {
        image {
            width: 70rpx;
            height: 70rpx;
        }
    }

    .change {
        image {
            width: 70rpx;
            height: 70rpx;
        }
    }
}